<template>
  <!-- 作业列表 -->
  <el-dialog title="作业列表" :visible.sync="visible" width="1000px" top="5vh" append-to-body>
    <el-row>
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAddDetails"
      >添加
      </el-button>
      <el-button
        type="success"
        icon="el-icon-delete"
        size="mini"
        @click="handleDeleteDetails"
      >删除
      </el-button>
      <el-table border @row-click="clickRow" ref="table"
                :data="WorkList" row-key="columnId"
                :row-class-name="rowClassName"
                @selection-change="handleSelectionChange"

                height="300px">
        <el-table-column prop="check" type="selection" min-width="3%" align="center"/>
        <el-table-column prop="workName" label="作业名称" align="center" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="scope">
            <span class="star">*</span>
            <span >作业名称</span>
          </template>
          <template slot-scope="scope">
            <el-input v-show="scope.row.show" v-model="scope.row.workName"/>
            <span v-show="!scope.row.show">{{ scope.row.workName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="tableName" label="业务表编码" align="center" >
        </el-table-column>
        <el-table-column prop="tableName" label="业务表" align="center" width="130">
          <template slot="header" slot-scope="scope">
            <span class="star">*</span>
            <span >业务表</span>
          </template>
          <template slot-scope="scope">
            <el-select v-model="scope.row.tableName" v-show="scope.row.show" filterable placeholder="请输入业务表">
              <el-option
                v-for="table in tableNameOptions"
                :key="table.busTableName"
                :label="table.busTableComment"
                :value="table.busTableName"
              />
            </el-select>
            <el-select v-model="scope.row.tableName" disabled v-show="!scope.row.show" filterable placeholder="请输入业务表">
              <el-option
                v-for="table in tableNameOptions"
                :key="table.busTableName"
                :label="table.busTableComment"
                :value="table.busTableName"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="workType" label="作业类型" align="center" :formatter="workTypeFormat">
          <template slot="header" slot-scope="scope">
            <span class="star">*</span>
            <span >作业类型</span>
          </template>
          <template slot-scope="scope">
            <el-select v-model="scope.row.workType" v-show="scope.row.show" placeholder="请选择作业类型" clearable size="small">
              <el-option
                v-for="dict in workTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
            <el-select v-model="scope.row.workType" disabled v-show="!scope.row.show" placeholder="请选择作业类型" clearable size="small">
              <el-option
                v-for="dict in workTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="parseInt(dict.dictValue)"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="优先级" align="center">
          <template slot="header" slot-scope="scope">
            <span class="star">*</span>
            <span >优先级</span>
          </template>
          <template slot-scope="scope">
            <el-input v-model="scope.row.workOrder"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="workExplain" label="作业说明" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-show="scope.row.show" v-model="scope.row.workExplain"/>
            <span v-show="!scope.row.show">{{ scope.row.workExplain }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="workScript" label="作业脚本"  align="center" :show-overflow-tooltip="true">
          <template slot="header" slot-scope="scope">
            <span class="star">*</span>
            <span >作业脚本</span>
          </template>
          <template slot-scope="scope">
            <el-input v-show="scope.row.show" v-model="scope.row.workScript"/>
            <span v-show="!scope.row.show">{{ scope.row.workScript }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="show" width="180" label="操作" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="modifyRow(scope.row,scope)">修 改</el-button>
            <el-button size="mini" type="danger" @click="save(scope.row)">取 消</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-form>
        <el-form-item   slot-scope="scope" style="text-align: center;margin-left:-100px;margin-top:10px;">
          <el-button type="primary" @click="submitForm()" aria-required="false">提交</el-button>
          <el-button @click="visible = false">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>
<style type="css">
.star{
  color:#f56c6c;
  font-size: 14px;
  margin-top: 4px;
}

</style>
<script>
import {getBusTable, updateBusTable, removeChecked} from "@/api/datafactory/table";
import {selectWorkBySchemeId} from "@/api/datafactory/scheme";
import {setWorkOrder, delWork} from "@/api/datafactory/work"
import {getTables} from "@/api/datafactory/table";
import Sortable from "sortablejs";

export default {
  data() {
    return {
      // 遮罩层
      visible: false,
      // 选中数组值
      tables: [],
      // 总条数
      total: 0,
      // 作业数据
      WorkList: [],
      // 当前作业所属方案Id
      schemeId: 0,
      // 业务表名称
      tableNameOptions: [],
      // 作业类型字典
      workTypeOptions: [],
      //选中的从表数据
      checkeDdetail: [],
      //删除的ID集合
      deleteID: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workName: undefined,
        workType: undefined,
      }
    };
  },

  methods: {
    /**
     * 修改当前行数据
     */
    modifyRow(row, index) {
      row.show = true;
    },
    save(row, index) {
      row.show = false;
    },
    /*handleDeleteDetails() {
      if (this.tables.length == 0) {
        this.$alert("请先选择要删除的数据", "提示", {
          confirmButtonText: "确定",
        });
      } else {
        if(this.id[0] != null){
          removeChecked(parseInt(this.id)).then(res => {
            if (res.code === 200) {
              this.msgSuccess("删除成功");
              this.WorkList.splice(this.tables[0].xh - 1, 1)
              this.deleteID.push(this.id);
            }
          });
        } else {
          this.WorkList.splice(this.tables[0].xh - 1, 1)
          this.deleteID.push(this.id);
        }
      }
    },*/
    handleDeleteDetails() {
      let rowCount = this.tables[0].xh - 1;
      for (let i = 0; i < this.WorkList.length; i++) {
        if(rowCount === i){
          if(this.WorkList[i].workId !== null){
            this.deleteID.push(this.WorkList[i].workId);
          }
        }
      }

      this.WorkList.splice(this.tables[0].xh - 1, 1)
    },
    //添加一行数据
    handleAddDetails() {
      if (this.WorkList == undefined) {
        this.WorkList = new Array();
      }
      let obj = {};
      obj.schemeId = this.schemeId;
      obj.chack = "";
      obj.workName = "";
      obj.tableName = "";
      obj.tableName = "";
      obj.workType = "";
      obj.workOrder = "";
      obj.workExplain = "";
      obj.status = 1;
      obj.workId = null;
      obj.show = true;

      this.WorkList.push(obj);
    },
    rowClassName({row, rowIndex}) {
      row.xh = rowIndex + 1;
    },
    // 显示弹框
    show(schemeId) {
      this.schemeId = schemeId;
      this.getList(schemeId);
      this.visible = true;
      var table = {"tableStatus": 1};
      getTables(table).then(response => {
        this.tableNameOptions = response;
      });
      this.getDicts("work_type").then(response => {
        this.workTypeOptions = response.data;
      });
    },
    // 作业类型字典翻译
    workTypeFormat(row, column) {
      return this.selectDictLabel(this.workTypeOptions, row.workType);
    },

    tableNameFormat(row, column) {
      var tableComment = "";
      this.tableNameOptions.forEach(item => {
        if (item.busTableName == row.tableName) {
          tableComment = item.busTableComment;

        }
      });
      return tableComment
    },
    // 提交按钮
    submitForm() {
      let check=true;
      for(let i=0;i<this.WorkList.length;i++){
        if(this.WorkList[i].workName==="" || this.WorkList[i].tableName==="" || this.WorkList.workType===null ||
          this.WorkList.workOrder === null || this.WorkList.workScript===""){
          this.msgError("第"+(i+1)+"行请输入必录字段:")
          check=flase;
          break;
        }
      }
      if(check){
        if (this.WorkList.length > 0) {
          setWorkOrder(this.WorkList).then(res => {
            if (res.code === 200) {
              this.msgSuccess("提交成功")
              this.visible = false;
            }
          })
          console.log(this.deleteID)
          if(this.deleteID.length !== 0){
            delWork(this.deleteID)
          }
        }
      }else{
        this.msgError("提交失败")
      }

    },
    // 单选框左键选中
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.dragTable.clearSelection();
        this.$refs.dragTable.toggleRowSelection(selection.pop());
      } else {
        this.id = selection.map(item => item.columnId)
        this.tables = selection;
      }
    },
    // //单选框选中数据
    // handleDetailSelectionChange(selection) {
    //   if (selection.length > 1) {
    //     this.$refs.dragTable.clearSelection();
    //     this.$refs.dragTable.toggleRowSelection(selection.pop());
    //   } else {
    //     this.id = selection.map(item => item.columnId)
    //     this.checkedDetail = selection;
    //   }
    // },
    // 根据方案id查询作业数据
    getList(schemeId) {
      selectWorkBySchemeId(schemeId).then(res => {
        if (res.code === 200) {
          this.WorkList = res.data;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    selectThisRow(row) {
      this.$refs.dragTable.toggleRowSelection(row);
    },


  },
  mounted() {
    const el = this.$refs.dragTable.$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
    const sortable = Sortable.create(el, {
      handle: ".allowDrag",
      onEnd: evt => {
        const targetRow = this.WorkList.splice(evt.oldIndex, 1)[0];
        this.WorkList.splice(evt.newIndex, 0, targetRow);
        for (let index in this.WorkList) {
          this.WorkList[index].sort = parseInt(index) + 1;
        }
      }
    });
  }
};
</script>
